import React from 'react';

import {
  createStackNavigator,
  TransitionSpecs,
  HeaderStyleInterpolators,
  TransitionPresets,
} from '@react-navigation/stack';
import { color } from 'react-native-tailwindcss';

import routes from './routeConfig';

const RouteStacks = createStackNavigator();

const MyTransition = {
  gestureDirection: 'horizontal',
  transitionSpec: {
    open: TransitionSpecs.TransitionIOSSpec,
    close: TransitionSpecs.TransitionIOSSpec,
  },
  headerTitleAlign: 'center',
  headerStyleInterpolator: HeaderStyleInterpolators.forFade,
  ...TransitionPresets.SlideFromRightIOS,
};

function RouteStack() {
  return (
    <RouteStacks.Navigator
      initialRouteName="Home"
      screenOptions={{
        cardOverlayEnabled: true,
        gestureEnabled: true,
        headerMode: 'screen',
        headerStyle: {
          backgroundColor: color.themeBlue,
          height: 50,
        },
        headerTintColor: color.white,
        headerTitleStyle: {
          fontWeight: 'bold',
          fontSize: 16,
        },
        ...MyTransition,
      }}>
      {routes.map((item, index) => {
        return (
          <RouteStacks.Screen
            key={`${item.name}_${index}`}
            name={item.name}
            component={item.component}
            options={item.options}
          />
        );
      })}
    </RouteStacks.Navigator>
  );
}

export default RouteStack;
